<template>
  <div 
    :class="[
      'bx-spin',
      {
        'bx-spin--full-screen': fullScreen
      }
    ]"
    v-if="visible"
  >
    <div class="bx-spin__mask" v-if="mask"></div>
    <div class="bx-spin__content">
      <div class="bx-spin__spinner">
        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
        </svg>
      </div>
      <div v-if="tip" class="bx-spin__tip">{{ tip }}</div>
    </div>
  </div>
</template>

<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'

export default {
  name: 'BxSpin',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String,
      default: ''
    },
    fullScreen: {
      type: Boolean,
      default: false
    },
    mask: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const visible = ref(props.loading)

    watch(() => props.loading, (newVal) => {
      visible.value = newVal
    })

    return {
      visible
    }
  }
}
</script>

<style scoped>
.bx-spin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.bx-spin--full-screen {
  position: fixed;
}

.bx-spin__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: var(--bx-radius-large);
}

.bx-spin__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  color: var(--bx-text-primary);
}

.bx-spin__spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: rgba(0, 122, 255, 0.8);
}

.bx-spin__tip {
  margin-top: 16px;
  font-size: 14px;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -124px;
  }
}
</style>

